<template>
  <div class="result-show-container">
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="类别统计" name="categoryStats">
        <div v-if="activeTab === 'categoryStats'">
          <div class="top-row">
            <el-card class="scale-card">
              <p>调整前功能点总数</p>
              <p class="scale-value">{{ categoryStatsData[5].value }}</p>
            </el-card>
            <el-card class="scale-card">
              <p>调整后功能点总数</p>
              <p class="scale-value">{{ categoryStatsData[6].value }}</p>
            </el-card>
          </div>
          <div class="bottom-row">
            <el-card class="stats-card">
              <p>类别统计</p>
              <el-table :data="categoryStatsData.slice(0, 5)" style="width: 100%; margin-top: 20px">
                <el-table-column prop="name" label="项" width="150"></el-table-column>
                <el-table-column prop="value" label="数量"></el-table-column>
              </el-table>
            </el-card>
            <el-card class="chart-card">
              <p>功能点统计</p>
              <div id="bar-chart" class="bar-chart"></div>
            </el-card>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="团队管理" name="teamManagement">
        <div v-if="activeTab === 'teamManagement'">
          <el-card>
            <p>团队管理</p>
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="参数调整" name="parameterAdjustment">
        <div v-if="activeTab === 'parameterAdjustment'">
          <div class="project-confirm-container" style="margin-top: 20px;">
            <el-card>
              <p>此为大模型分析结果</p>
            </el-card>
            <el-table :data="complexityData" style="width: 100%; margin-top: 20px">
              <el-table-column prop="name" label="复杂度" width="150"></el-table-column>
              <el-table-column label="值">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.value" placeholder="请输入"></el-input>
                </template>
              </el-table-column>
            </el-table>
            <el-select v-model="selectedOption" placeholder="请选择" style="width: 200px; margin-top: 20px">
              <el-option label="通用系统调整因子法" value="GSC"></el-option>
              <el-option label="需求变更调整因子法" value="VAF"></el-option>
            </el-select>
            <el-table v-if="selectedOption === 'GSC'" :data="gscData" style="width: 100%; margin-top: 20px">
              <el-table-column prop="name" label="项" width="250"></el-table-column>
              <el-table-column prop="value" label="值"></el-table-column>
            </el-table>
            <div v-if="selectedOption === 'VAF'">
              <el-select v-model="selectedSection" placeholder="请选择" style="width: 200px; margin-top: 20px">
                <el-option label="项目立项" value="initiation"></el-option>
                <el-option label="项目招标" value="bidding"></el-option>
                <el-option label="项目早期" value="early"></el-option>
                <el-option label="项目中期" value="midterm"></el-option>
                <el-option label="项目完成" value="completion"></el-option>
              </el-select>
              <el-table :data="vafData" style="width: 100%; margin-top: 20px">
                <el-table-column prop="name" label="项" width="250"></el-table-column>
                <el-table-column label="值">
                  <template slot-scope="scope">
                    <span v-if="isVisible(scope.row.name)">{{ scope.row.value }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-button type="primary" style="margin-top: 20px" @click="proceedToNextStep">
              确认
            </el-button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import * as echarts from 'echarts';


export default {
  name: 'ResultShow',
  data() {
    return {
      activeTab: 'categoryStats',
      categoryStatsData: [
        { name: 'EO数量', value: 10 },
        { name: 'EI数量', value: 20 },
        { name: 'EQ数量', value: 15 },
        { name: 'ILF数量', value: 5 },
        { name: 'EIF数量', value: 8 },
        { name: '调整前功能点总数', value: 58 },
        { name: '调整后功能点总数', value: 60 },
      ],
      // markdownContent: '**此为大模型展示结果**', // Markdown 内容
      complexityData: [
        { name: 'EO复杂度', value: '' },
        { name: 'EI复杂度', value: '' },
        { name: 'EQ复杂度', value: '' },
        { name: 'ILF复杂度', value: '' },
        { name: 'EIF复杂度', value: '' },
      ],
      selectedOption: '', // 用于存储下拉框选择的值
      selectedSection: '', // 用于存储VAF的阶段选择
      gscData: [
        { name: 'EI数量', value: 0 },
        { name: 'EO数量', value: 0 },
        { name: 'EQ数量', value: 0 },
        { name: 'ILF数量', value: 0 },
        { name: 'EIF数量', value: 0 },
        { name: '数据通信', value: 0 },
        { name: '分布式数据处理', value: 0 },
        { name: '性能', value: 0 },
        { name: '重度配置', value: 0 },
        { name: '处理速率', value: 0 },
        { name: '在线数据输入', value: 0 },
        { name: '最终用户使用效率', value: 0 },
        { name: '在线升级', value: 0 },
        { name: '复杂处理', value: 0 },
        { name: '可重用性', value: 0 },
        { name: '易安装性', value: 0 },
        { name: '易操作性', value: 0 },
        { name: '多场所', value: 0 },
        { name: '支持变更', value: 0 },
      ],
      vafData: [
        { name: 'EI数量', value: 0 },
        { name: 'EO数量', value: 0 },
        { name: 'EQ数量', value: 0 },
        { name: 'ILF数量', value: 0 },
        { name: 'EIF数量', value: 0 },
        { name: '项目立项', value: 0, key: 'initiation' },
        { name: '项目招标', value: 0, key: 'bidding' },
        { name: '项目早期', value: 0, key: 'early' },
        { name: '项目中期', value: 0, key: 'midterm' },
        { name: '项目完成', value: 0, key: 'completion' },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    handleTabClick(tab) {
      if (tab.name === 'categoryStats') {
        this.$nextTick(() => {
          this.initChart();
        });
      }
    },
    initChart() {
      const chartDom = document.getElementById('bar-chart');
      if (!chartDom) {
        console.warn('Chart DOM element not found');
        return;
      }
      const myChart = echarts.init(chartDom);
      const option = {
        title: {
          text: '功能点统计'
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: ['EO', 'EI', 'EQ', 'ILF', 'EIF']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.categoryStatsData.slice(0, 5).map(item => item.value),
            type: 'bar',
            barWidth: '70%' // 设置柱状图的宽度为默认的一半
          }
        ]
      };
      myChart.setOption(option);
    },
    proceedToNextStep() {
      this.$message.success('进入下一步');
      this.$router.push({ name: 'ResultShow' }); // 确保路由名称正确
    },
    isVisible(name) {
      const sectionMap = {
        initiation: '项目立项',
        bidding: '项目招标',
        early: '项目早期',
        midterm: '项目中期',
        completion: '项目完成',
      };
      return sectionMap[this.selectedSection] === name;
    },
  },
};
</script>

<style scoped>
.result-show-container {
  padding: 20px;
}

.top-row,
.bottom-row {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}

.scale-card {
  flex: 0 0 auto;
  width: 300px;
  text-align: center;
}

.scale-value {
  font-size: 24px;
  font-weight: bold;
  margin-top: 10px;
}

.stats-card {
  flex: 0 0 auto;
  width: 500px;
}

.chart-card {
  flex: 0 0 auto;
  width: 400px;
}

.bar-chart {
  width: 100%;
  height: 300px;
}

.project-confirm-container {
  padding: 20px;
}
</style>
